<template>
  <d2-container better-scroll>
    <el-button @click="push_all" style="float:right;margin:20px" type="primary"
      >发布公告<i class="el-icon-upload el-icon--right"></i
    ></el-button>
    <el-button
      v-show="multipleSelection.length > 0"
      @click="handleDelete(multipleSelection)"
      style="float:right;margin:20px"
      type="primary"
      >批量删除<i class="el-icon-upload el-icon--right"></i
    ></el-button>
    <el-table
      @selection-change="handleSelectionChange"
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        label="id"
        prop="id"
        width="200"
      ></el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        prop="create_time"
        label="日期"
        width="180"
      >
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        prop="title"
        label="标题"
        width="180"
      >
      </el-table-column>
      <el-table-column header-align="center" prop="text" label="内容">
      </el-table-column>
      <!-- 编辑删除 -->
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="success"
            @click="handleUpdate(scope.row)"
            >编辑
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

   
    
    <!-- 发布公告 -->
    <el-dialog title="发布公告" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="form" :rules="rules" ref="form" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="text">
          <el-input
            type="textarea"
            v-model="form.text"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add_notice">确 定</el-button>
      </span>
    </el-dialog>
 </d2-container>
</template>

<script>
import {
  get_notice,
  add_notice,
  put_notice,
  del_notice
} from "@/api/releasecourse/course";
export default {
  data() {
    return {
      multipleSelection: [],
      type: null,
      tableData: [],
      dialogFormVisible: false,
      form: {
        title: "",
        text: ""
      },
      rules: {
        date: [{ required: true, message: "请输入日期", trigger: "blur" }],
        name: [{ required: true, message: "请输入标题", trigger: "blur" }],
        address: [{ required: true, message: "请输入内容", trigger: "blur" }]
      }
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    all_del() {
      
    },
    get_notice() {
      get_notice().then(res => {
        this.tableData = res.data;
      });
    },
    push_all() {
      this.dialogFormVisible = true;
      this.type = "add";
    },
    add_notice() {
      if (this.type == "add") {
        add_notice(this.form).then(res => {
          if (res.statusCode == 200) {
            this.$message({
              type: "success",
              message: "发布成功!"
            });
            this.dialogFormVisible = false;
            this.get_notice();
          } else {
            this.$message({
              type: "error",
              message: res.message
            });
          }
        });
      } else {
        put_notice(this.form).then(res => {
          if (res.statusCode == 200) {
            this.$message({
              type: "success",
              message: "修改成功!"
            });
            this.dialogFormVisible = false;
            this.get_notice();
          } else {
            this.$message({
              type: "error",
              message: res.message
            });
          }
        });
      }
    },
    //编辑公告
    handleUpdate(row) {
      this.type = "update";
      this.dialogFormVisible = true;
      this.form.title = row.title;
      this.form.text = row.text;
    },

    //删除公告
    handleDelete(row) {
      this.$confirm("此操作将永久删除该公告, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let id_arr = [];
          if (Array.isArray(row)) {
            row.forEach(item => {
              id_arr.push(item.id);
            });
          } else {
            id_arr.push(row.id);
          }
          // id_arr.push(row.id);
          del_notice(id_arr).then(res => {
            if (res.statusCode == 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.get_notice();
            } else {
              this.$message({
                type: "error",
                message: res.message
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  mounted() {
    this.get_notice();
  }
};
</script>

<style></style>
